<!DOCTYPE html>
<html>
<head>
    <title><%= @title %></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body {
            background: #fff;
            background: no-repeat -moz-linear-gradient(top, #F2F2F2 0%, #ffffff 24%);
            background: no-repeat -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(24%,#ffffff));
            font-family: Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4em;
        }

        #header {
            display: block;
            margin: 100px auto 80px auto;
        }
            #header h1 {
                color: #444;
                font-size: 70px;
                text-align: center;
                text-shadow: #ccc 1px 1px 2px;
            }

        #main {
            margin: auto;
            width: 500px;
        }

        .category {
            margin-bottom: 20px;
        }
            .category h2 {
                font-size: 20px;
                font-weight: bold;
                color: #333;
                margin-bottom: 7px;
            }
            .category ul {
                border: 4px solid #ddd;
                -moz-border-radius: 4px;
                border-radius: 4px;
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .category a {
                color: #555;
                display: block;
                font-size: 16px;
                padding: 10px 7px;
                text-decoration: none;
                border-top: 1px solid #ddd;
            }
            .category li:first-child a {
                border-top: 0;
            }
            .category a:hover {
                background: #efefef;
            }

        #footer {
            color: #aaa;
            display: block;
            font-size: 9px;
            margin-top: 100px;
            text-align: center;
        }
            #footer a { color: #aaa }
    </style>
</head>
<body>
    <header id="header">
        <h1><%= @title %></h1>
    </header>
    <div id="main">
        <% for categoryName, manifests of @categories: %>
            <section class="category">
                <h2><%= categoryName %></h2>
                <ul>
                    <% for manifest in manifests: %>
                        <li><a href="<%= @baseUrl %><%- manifest.slug %>/"><%= manifest.title %></a></li>
                    <% end %>
                </ul>
            </section>
        <% end %>
    </div>
    <footer id="footer">
        Created by <a href="http://maximebf.com">maximebf</a> -
        <a href="http://github.com/maximebf/beautiful-docs">github.com/maximebf/beautiful-docs</a>
    </footer>
</body>
</html>
